<template>
  <div class="ranking-container">
    <div class="official-ranking">
      <h2>官方榜</h2>
      <div class="official-ranking-item" v-for="item in officialRank" :key="item.id">
        <RankingCard :id="item.id" :pic="item.coverImgUrl" :playCount="item.playCount" :showTable="true"></RankingCard>
      </div>
    </div>
    <div class="other-ranking">
      <h2>全球榜</h2>
      <div class="other-ranking-box">
        <RankingCard v-for="item in otherRank" :key="item.id" :id="item.id" :name="item.name" :pic="item.coverImgUrl" :playCount="item.playCount" :showTable="false"></RankingCard>
      </div>
    </div>
  </div>
</template>

<script>
import RankingCard from '@/components/SongGroup/RankingCard.vue'
import { getRankingAPI } from '@/api/RankingAPI.js'

export default {
  name: 'Ranking',
  components: {
    RankingCard
  },
  data() {
    return {
      officialRank: [],
      otherRank: []
    }
  },
  created() {
    this.initRankingList()
  },
  methods: {
    // 获取排行榜数据
    async initRankingList() {
      const {
        data: { list: res }
      } = await getRankingAPI()
      this.officialRank = res.filter((item) => {
        return item.ToplistType !== undefined
      })
      this.otherRank = res.filter((item) => {
        return item.ToplistType === undefined
      })
    }
  }
}
</script>

<style lang="less" scoped>
.ranking-container {
  margin: 0 auto;
  width: 1088px;
  h2 {
    font-size: 20px;
    color: #373737;
    text-align: left;
  }
  .official-ranking {
    .official-ranking-item {
      padding-top: 15px;
      overflow: hidden;
      /deep/ .song-group-box-card {
        float: left;
        margin: 0 25px 25px 0;
        width: 170px;
        height: 170px;
        .song-group-img {
          width: 170px;
          height: 170px;
        }
      }
    }
  }
  .other-ranking {
    .other-ranking-box {
      overflow: hidden;
      margin-top: 15px;
      margin-left: -12px;
      /deep/ .song-group-box-card {
        float: left;
        margin-left: 12px;
        margin-bottom: 20px;
      }
    }
  }
}
</style>
